import React, {Component,Fragment} from 'react';


import { connect } from 'react-redux';

import { Table, Card, Button, Divider, Modal } from 'antd';
import {PlusOutlined } from "@ant-design/icons"
import style from './styles.module.less';

const dataInfo = [
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
  {
    id:1,
    year:"2018",
    major:"计算机_认证负责人",
    courseName:"密码学",
    status:"2020-03-02 08:00:00"
  },
]
const dataGoal = [
  {
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },
  {
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },{
    id:1,
    goal:"课程目标1",
    detail:"能够以创新思维跟踪计算机工程领域的前沿技术，并能将新技术、新方法应用于工程实践，从事本专业领域相关产品的设计、开发和生产，负责完成一个以上产品关键技术的方案设计和研发工作，胜任研发工程师、产品设计师等工作。",
    ability:"1.1",
    sort:"2"
  },
]
class CourseGoal extends Component {
  columnsInfo = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align:'center',

  },
  {
    title: '年级',
    dataIndex: 'year',
    key: 'year',
    align:'center',

  },
  {
    title: '专业名称',
    dataIndex: 'major',
    key: 'major',

  },
  {
    title: '课程名称',
    key: 'courseName',
    dataIndex: 'courseName',

  },
  {
    title: '课程状态（计算时间）',
    key: 'status',
    dataIndex: 'status',

  }
];
columnsGoal = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align:'center',
  },
  {
    title: '课程目标名',
    dataIndex: 'goal',
    key: 'goal',
    align:'center',
  },
  {
    title: '详细描述',
    dataIndex: 'detail',
    key: 'detail',
    width:"50%"
  },
  {
    title: '毕业能力',
    key: 'ability',
    dataIndex: 'ability',
    align:'center',

  },
  {
    title: '显示次序',
    key: 'sort',
    dataIndex: 'sort',
    align:'center',

  },
  {
    title: '操作',
    key: 'status',
    dataIndex: 'status',
    align:'center',

    render:() => {
      return <Fragment><Button type="link" onClick={() => this.props.editModalVisibleChange(true)}>编辑</Button><Divider type="vertical" /><Button type="link">删除</Button></Fragment>
    }
  }
];
	render(){
		return(
			<Fragment>
        <div className={style.wrapper}>
          <div className={style.container}>
            <div className={style.studentList}>
              <Card size="small" title="课程信息" bodyStyle={{padding:0}} hoverable >
                <Table columns={this.columnsInfo} dataSource={dataInfo} size="small" pagination={{}}/>
              </Card>
            </div>
            <div className={style.ability}>
              <Card size="small" title="课程目标" hoverable extra={<Button type="primary" onClick={() => this.props.addModalVisibleChange(true)} icon={<PlusOutlined />}>添加课程目标</Button>}>
                <Table columns={this.columnsGoal} dataSource={dataGoal} size="small" pagination={{}}/>
                <Modal
                  title="新增课程目标"
                  visible={this.props.store.addModal.visible}
                  onOk={() => this.props.addModalVisibleChange(false)}
                  // onCancel={this.handleCancel}
                >
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                </Modal>
                <Modal
                  title="编辑课程目标"
                  visible={this.props.store.editModal.visible}
                  onOk={() => this.props.editModalVisibleChange(false)}
                  // onCancel={this.handleCancel}
                >
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                </Modal>
              </Card>
            </div>
          </div>
        </div>
      </Fragment>
        
		)
	}
}

const mapStateToProps = (state) => { return {store: state.courseGoal}}
const mapDispatchToProps = dispatch => ({
  addModalVisibleChange:dispatch.courseGoal.addModalVisibleChange,
  editModalVisibleChange:dispatch.courseGoal.editModalVisibleChange
})

export default connect(mapStateToProps,mapDispatchToProps)(CourseGoal);